import React, {useEffect, useState} from 'react';
import {View,} from '@tarojs/components';


import styles from './index.module.scss';
import {FixedView, Image, Swiper} from "@taroify/core";
import {HomeOutlined, ShoppingCartOutlined} from "@taroify/icons";
import GoodInfo from "@/mall/pages/good/GoodInfo";
import ChoiceInfo from "@/mall/pages/good/ChoiceInfo";
import EvaluateInfo from "@/mall/pages/good/EvaluateInfo";
import DetailInfo from "@/mall/pages/good/DetailInfo";
import {goMallCart, goMallHome} from "@/mall/Go";

const Index: React.FC = () => {
    const [imageList, setImageList] = useState<any>([])
    useEffect(() => {
        load();
    }, []);

    const load = async () => {
        const images = [
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner1.png',
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner2.png',
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner3.png',
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner4.png',
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner5.png',
            'https://tdesign.gtimg.com/miniprogram/template/retail/home/v2/banner6.png',
        ];
        setImageList(images)
    }

    return (
        <View className={styles.page}>
            <View className={styles.page_body}>

                <Swiper autoplay={4000} className={styles.swiper}>
                    <Swiper.Indicator/>
                    {
                        imageList && imageList.map((item, index) => (
                            <Swiper.Item key={index} className={styles.swiper_item}>
                                <Image src={item} mode={"scaleToFill"} className={styles.swiper_image}/>
                            </Swiper.Item>

                        ))
                    }

                </Swiper>
                <GoodInfo></GoodInfo>
                <view className={styles.page_choice_info}>
                    <ChoiceInfo></ChoiceInfo>
                </view>
                <view className={styles.page_evaluate_info}>
                    <EvaluateInfo></EvaluateInfo>
                </view>

                <view className={styles.page_detail_info}>
                    <DetailInfo></DetailInfo>
                </view>
            </View>



            <FixedView position="bottom">
                <view className={styles.page_foot}>
                    <view className={styles.page_foot_icon} onClick={goMallHome}>
                        <HomeOutlined size={18}/>
                        <view>首页</view>
                    </view>
                    <view className={styles.page_foot_icon} onClick={goMallCart}>
                        <ShoppingCartOutlined size={18}/>
                        <view>购物车</view>
                    </view>
                    <view className={styles.page_foot_button}>
                        <view className={styles.page_foot_button_left}>
                            加入购物车
                        </view>
                        <view className={styles.page_foot_button_right}>
                            立即购买
                        </view>
                    </view>
                </view>
            </FixedView>
        </View>


    );
};

export default Index;
